import Scene from './scene'
import BackGround from '../runtime/background'
import Sprite from '../base/sprite'
import util from '../base/util'
import rankPanel from '../base/switchPanel'
import items from '../entity/index'

const screenWidth = window.innerWidth
const screenHeight = window.innerHeight

export default class AstraySingleScene extends Scene {
  constructor(aParent, aOpenID) {
    super(aParent, aOpenID)
    this.bg = new BackGround.astraySingle()
    this.bindControl = this.control.bind(this)
    this.buy_btn = new Sprite("images/astray/buttons.png", screenWidth * 0.6, screenHeight * 0.08, screenWidth * 0.2, screenHeight * 0.81, 2,
    {sx: 248, sy: 276, sw: 200, sh: 170, texts: [{value: "购买", font: screenHeight * 0.04 + 'px Arial', pos: [screenWidth * 0.23, screenHeight * 0.056], color: "#ffffff"}]}, "shop_buy")
    this.return_btn = new Sprite("images/astray/buttons.png", screenWidth * 0.6, screenHeight * 0.08, screenWidth * 0.2, screenHeight * 0.9, 2,
    {sx: 470, sy: 276, sw: 200, sh: 170, texts: [{value: "返回", font: screenHeight * 0.04 + 'px Arial', pos: [screenWidth * 0.23, screenHeight * 0.05], color: "#ffffff"}]}, "shop_return")
    this.rank = new rankPanel("shop_list", {left: 0.1, height: 0.7, top: 0.1}, {height: 0.1, top: 0.4})

    this.items = []
    let idx = 0
    for (let i in items)
      this.items.push(new items[i](idx++))
    this.current_select = 0
  }

  initEnter(){
    Scene.prototype.enter.apply(this, arguments)
    canvas.addEventListener('touchstart', this.bindControl)
  }
  async enter(){
    this.rank.enterSwitch3D(1, 1, 1)
    this.initEnter()
  }

  leave(){
    this.coins = null
    canvas.removeEventListener('touchstart', this.bindControl)
  }

  control(e){
    e.preventDefault()
    const x = e.touches[0].clientX
    const y = e.touches[0].clientY
    for (let i = 0; i < this.items.length; ++i)
      if (this.items[i].pointIsIn(x, y) && this.current_select != i){
        this.current_select = i
        this.rank.rank_updated = false
        return
      }
    if (this.buy_btn.pointIsIn(x , y)){
      if (this.items[this.current_select].price <= this.coins){
        util.request({
          api: "astray/updateItems",
          data: {openid: this.openid, 
            type: this.items[this.current_select].name,
            count: 1,
            cost: - this.items[this.current_select].price
          }
        }).then(e => {
          this.coins -= this.items[this.current_select].price
          this[this.items[this.current_select].name]++
          this.rank.rank_updated = false
        })
      }
    }else if (this.return_btn.pointIsIn(x, y)){
      this.toNextScene("start")
    }else{ 
      this.rank.controlSwitch3D(x, y)
    }
  }

  update(){
    return Scene.prototype.update.apply(this, arguments)
    // this.bg.update(ctx)
  }

  async __getListRecords(){
    let sz = screenHeight * 0.04
    let ht = screenHeight * 0.04 + screenHeight * 0.05
    let txts = [//{value: "道具", font: screenHeight * 0.06 + 'px Arial', pos: [screenWidth * 0.3, screenHeight * 0.07], color: "#ffffff"},
    {value: "道具", font: screenHeight * 0.04 + 'px Arial', pos: [screenWidth * 0.1, ht], color: "#ffffff"},
    {value: "价格", font: screenHeight * 0.04 + 'px Arial', pos: [screenWidth * 0.34, ht], color: "#ffffff"},
    {value: "拥有", font: screenHeight * 0.04 + 'px Arial', pos: [screenWidth * 0.6, ht], color: "#ffffff"}]

    for (let i = 0; i < this.items.length; ++i){
      let ht = screenHeight * 0.07 + (i + 1) * screenHeight * 0.05
      if (i == this.current_select)
        txts.push({src: 'images/astray/select.png', pos: [screenWidth * 0.06, ht, sz, sz]})
      let vw = this.items[i].view()
      for (let j in vw)
        txts.push(vw[j])

      if (this.coins == undefined){
        let dt = (await util.request({
          api: "astray/playerInfo",
          data: {openid: this.openid,
                 type: this.items[i].name}}))
        this[this.items[i].name] = dt.data.count || 0
      }

      txts.push({value: this[this.items[i].name] || 0, font: screenHeight * 0.03 + 'px Arial', pos: [screenWidth * 0.64, this.items[i].ht + screenHeight * 0.03], color: "#ffffff"})
    }

    if (this.coins == undefined){
      let dt = await util.request({
        api: "astray/playerInfo",
        data: {openid: this.openid,
              type: "coin"}})
      this.coins = dt.data.count || 0
    }
    txts.push({src: 'images/astray/coin.png', pos: [screenWidth * 0.3, screenHeight * 0.6, sz * 2, sz * 2]})
    txts.push({value: this.coins.toString(), font: screenHeight * 0.06 + 'px Arial', pos: [screenWidth * 0.48, screenHeight * 0.66], color: "#ffffff"})
    return txts
  }

  async render(ctx){
    Scene.prototype.render.apply(this, arguments)
    this.bg.render(ctx)
    this.buy_btn.drawToCanvas(ctx)
    this.return_btn.drawToCanvas(ctx)
    let txts = []
    if (!this.rank.rank_updated)
      txts = await this.__getListRecords()
    await this.rank.renderSwitch3D(ctx, txts)
    ctx.update()
  }
}